<template>
    <!-- 搜索 -->
    <div class="search-container">
        <div class="form-content">
            <el-form :inline="true" :model="filterForm" class="demo-form-inline">
                <el-form-item label="姓名">
                    <el-input maxlength="200" clearable v-model.trim="filterForm.name" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="账号/手机号">
                    <el-input maxlength="200" clearable v-model.trim="filterForm.phone" placeholder="请输入手机号" />
                </el-form-item>
                <el-form-item label="教育ID">
                    <el-input maxlength="200" clearable v-model.trim="filterForm.eduId" placeholder="请输入教育ID" />
                </el-form-item>
                <el-form-item label="学段学科">
                    <el-cascader 
                        placeholder="请选择学段学科"
                        v-model="filterForm.stageArr"
                        :options="stageRefSubject" 
                        :props="stageTreeProps" 
                        clearable 
                    />
                </el-form-item>
                <el-form-item label="职位类型">
                    <el-select v-model="filterForm.positionType" placeholder="请选择职位类型" clearable>
                        <el-option v-for="(item) in posList" 
                            :key="item.code"
                            :value="item.code"
                            :label="item.name" 
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="所在单位">
                    <el-input v-model.trim="filterForm.school" maxlength="200" clearable placeholder="请输入所在单位" />
                </el-form-item>
                <el-form-item label="角色">
                    <!-- <el-select v-model="filterForm.roleCode" placeholder="请选择角色" clearable>
                        <el-option v-for="(item) in roleList" 
                            :key="item.roleCode"
                            :value="item.roleCode"
                            :label="item.roleName" 
                        />
                    </el-select> -->
                    <el-select
                        v-model="filterForm.roleCode" 
                        placeholder="请输入角色"
                        filterable
                        remote
                        clearable
                        :remote-method="getRoleList"
                        @clear="getRoleList"
                        
                    >
                        <el-option v-for="(item) in roleList" 
                            :key="item.roleId"
                            :value="item.roleCode"
                            :label="item.roleName" 
                        />
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="状态">
                    <el-select v-model="filterForm.memberState" placeholder="请选择状态" clearable>
                        <el-option label="启用" value="1" />
                        <el-option label="禁用" value="0" />
                    </el-select>
                </el-form-item> -->
                <el-form-item label="创建时间">
                    <date-range ref="dateRef"/>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-btn">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, reactive, toRef, computed, onMounted, onBeforeUnmount } from 'vue'
import DateRange from '@/components/date-range.vue';
import { useRoute } from 'vue-router'
import {useStore} from 'vuex'
import { useMessage } from '@/hooks/useMessage'
export default defineComponent({
    name: '',
    props: {
        // 职位类型列表
        posList: {
            type: Object,
            default: () => {}
        },
        // 学段学科年级列表
        stageRefSubject: {
            type: Array,
            default: () => []
        }
    },
    components: {
        DateRange
    },
    setup(props, context){
        const route = useRoute()
        const dateRef = ref(null)
        const store = useStore()
        const {messageSuccess, messageError} = useMessage();
        // 状态数据
        const state = reactive({
            stageTreeProps: {
                multiple: false,
                value: 'code',
                label: 'name',
                children: 'subjects',
                checkStrictly: true
            },
            filterForm: {
                pageIndex: 1,
                pageSize: 10
            },
            roleList: [],
            timer: null
        })

        // 方法
        const fns = {
            getRoleList(val = ''){
                store.dispatch('proxyAction', {
                    name: 'assignRoleList',
                    queries: {
                        pageIndex: 1,
                        pageSize: 10,
                        keyword: val,
                        institutionId: route.query.id
                    }
                }).then((res) => {
                    state.roleList = res.data?.rows || []
                }).catch(err => {
                    messageError(err.message || '操作失败')
                })
            },
            // 搜索
            search(){
                const { stageArr = '' } = state.filterForm
                const { startTime, endTime } = dateRef.value.getDateRange()
                console.log(startTime, endTime)
                state.filterForm.startTime = startTime && new Date(startTime).toUTCString()
                state.filterForm.endTime = endTime && new Date(endTime).toUTCString()
                state.filterForm.stageId = stageArr && stageArr[0] || ''
                state.filterForm.subjectId = stageArr && stageArr[1] || ''
                state.filterForm.pageIndex = 1
                context.emit('search', state.filterForm)
            },
            reset(){
                for (const key in state.filterForm) {
                    state.filterForm[key] = ''
                }
                dateRef.value.resetDateRange()
                state.filterForm.pageIndex = 1
                state.filterForm.pageSize = 10
                context.emit('search', state.filterForm)
            }
        }

        // 计算属性
        const computes = {
        }

        onMounted(() => {
            fns.getRoleList()
            // 联级选择器点击label也能选中
            state.timer = setInterval(function() {
                document.querySelectorAll('.el-cascader-node__label').forEach(el => {
                    el.onclick = function() {
                        if (el.previousElementSibling) el.previousElementSibling.click()
                    }
                })
            }, 1000)
        })
        onBeforeUnmount(() => {
            state.timer && clearInterval(state.timer)
        })

        return {
            ...toRefs(state),
            ...fns,
            ...computes,
            ...toRefs(props),
            dateRef
        }
    }
})
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.search-container{
        width:100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .form-content{
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            flex: 1;
        }
    }
 
</style>
